<template>
  <div>
<h1>景点回收站</h1>
    <div style="text-align: left" v-if="showBtn">
      <el-popconfirm
          title="删除后无法还原确定继续吗"
          @confirm="deleteScenicByIds">
        <template #reference>
          <el-button size="small" type="primary">
            <el-icon><delete/></el-icon>批量删除</el-button>
        </template>
      </el-popconfirm>
      <el-button @click="recoverScenic" size="small" type="primary">
        <el-icon><RefreshRight/></el-icon>批量还原</el-button>
    </div>
    <el-table
        :data="scenicList"
        :header-cell-style="{textAlign:'center'}"
        stripe style="width: 100%;border-radius: 5px 5px 0 0;"
        @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="80"> </el-table-column>
      <el-table-column   align="center" prop="scenicName" label="景区名称" >
        <template #default="scope">
          {{scope.row.scenicName}}
        </template>
      </el-table-column>
      <el-table-column  align="center" prop="scenicType" label="景区类型">
        <template #default="scope">
          {{scenicType[scope.row.scenicType]}}
        </template>
      </el-table-column>
      <el-table-column  prop="scenicDescription" label="景区描述" show-overflow-tooltip> </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button @click="recoverOne(scope.row.scenicId)" size="small" type="primary"><el-icon><RefreshRight/></el-icon>&nbsp;还原</el-button>
          <el-popconfirm
              title="删除后无法还原确定继续吗"
              @confirm="deleteById(scope.row.scenicId)">
            <template #reference>
              <el-button size="small" type="primary"><el-icon><delete/></el-icon>&nbsp;删除</el-button>
            </template>
          </el-popconfirm>

        </template>

      </el-table-column>
    </el-table>
    <div v-if="search===''">
      <el-pagination
          style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          :layout="layout"
          :total="total"
          :pager-count=5
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {deleteScenic, deleteScenicDeleted, getScenicListDeleted, recoveryScenicDeleted} from "@/api/multimedia";
import {getDevice} from "@/utils/get-device";
import {Delete, RefreshRight} from "@element-plus/icons";

export default {
  name: "recycle",
  components: {RefreshRight, Delete},
  data(){
    return{
      loading:false,
      search:'',
      scenicList:[],
      currentPage:1,
      total:0,
      pageSize:10,
      scenicType:{'LAKE':'湖','FLOWER':'花','KIOSK':'亭','HILL':'山','TREE':'树'},
      layout:'total, sizes, prev, pager, next, jumper',
      showBtn:false,
      listDelete:[]
    }
  },
  mounted() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getScenicList()
  },
  methods:{
    //删除单个数据
    deleteById(scenicId){
      const ids=[]
      ids.push(scenicId)
      deleteScenicDeleted(ids).then(()=> {
        this.getScenicList()
      })
    },
    //批量删除
    deleteScenicByIds(){
      const ids=[]
      this.listDelete.forEach(scenic =>{
        ids.push(scenic.scenicId)
      })
      deleteScenicDeleted(ids).then(()=>{
        this.getScenicList()
      })
    },
    //获取文章列表
    getScenicList(){
      getScenicListDeleted(this.currentPage,this.pageSize).then(response=>{
        const {scenicList,total}=response.data
        this.scenicList=scenicList
        this.total=total
      })
    },
    handleSelectionChange(select){
      this.showBtn = select.length > 1;
      this.listDelete=select
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getScenicList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getScenicList()
    },
    //批量还原文章
    recoverScenic(){
      const ids=[]
      this.listDelete.forEach(scenic =>{
        ids.push(scenic.scenicId)
      })
      recoveryScenicDeleted(ids).then(()=>{
        this.getScenicList()
      })
    },
    //还原一个
    recoverOne(id){
      const ids=[]
      ids.push(id)
      recoveryScenicDeleted(ids).then(()=>{
        this.getScenicList()
      })
    }
  }
}
</script>

<style scoped>

</style>
